<template>
  <div>
     <div class="right_one">
      <div class="right_two">全程</div>
      <div class="right_three">品牌</div>
      <div class="right_four">特色</div>
    </div>
    <div class="yy_one">
      <div v-html="yylist"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:"cinema",
    data:function() {
      return {
        yylist:'',
      };
    },
    mounted () {
      axios.get("/ajax/moreCinemas?day=2021-07-03&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1625290102714&cityId=30&optimus_uuid=7640BB60D4F211EBB71879B806D5721D35A48A02F91B455A8B7208E7EC164861&optimus_risk_level=71&optimus_code=10").then((res)=>{
        console.log(res);
        this.yylist=res.data;
      })
    }
     
}
</script>

<style>
.right_one {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(99, 98, 98, 0.3);
}
.right_three {
  position: relative;
}
.right_one > .right_three::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: -40px;
  border-left: 1px solid #e8e8e8;
}
.right_four {
  position: relative;
}
.right_four::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: -40px;
  border-left: 1px solid #e8e8e8;
}
.yy_one{
  width: 100%;
  padding-left: 10px;
}
.item mb-line-b{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.line-ellipsis {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title{
    margin-top: 10px;
    height: 23px;
    line-height: 23px;
    font-size: 16px;
    color: #000;
}
.price{
    font-size: 18px;
    color: #f03d37;
    
}
.q{
  font-size: 11px;
  color: #f03d37;
  margin-left: 5px;
}
.location-block{
  display: flex;
  align-items: center;
}
.flex{
  width: 286px;
  margin-top: 5px;
  font-size: 13px;
  color: #666;
}
.distance{
  
  font-size: 13px;
  color: #666;
}
.title-block .label-block{
  width: 100%;
  display: flex;
  margin-left: -4px;
  overflow: hidden;
}
.title-block .label-block>div {
    position: relative;
    display: inline-block;
    padding: 0 3px;
    height: 15px;
    line-height: 15px;
    border-radius: 2px;
    font-size: 12px;
}
.allowRefund,.endorse,.hallType{
  margin-left: 5px;
    color: #589daf;
    border: 1px solid #589daf;
}
.snack,.vipTag{
    color: #f90;
    border: 1px solid #f90;
     margin-left: 5px;
}
.discount-block{
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: row;
  color: #999;
  margin-top: 3px;
}
.discount-label{
  margin-top: 5px;
    width: 15px;
    height: 14px;
    top: 3px;
}
.discount-label>img{
   width: 15px;
  height: 14px;
}
.discount-label-text{
  position: absolute;
  font-size: 13px;
  top: 3px;left: 19px;
}
</style>